<template>
    <div>
      <div>
          <VMapShow v-if="showMap" :show_tools="show_tools" :change_map_center="change_map_center" :change_marker="change_marker" :amap_markers="amap_markers" :amap_center="amap_center" :show_marker="show_marker"></VMapShow>
      </div>

    </div>
</template>

<script>
  import VMapShow from '../layout/VMapShow.vue';
  export default{
    name:'DataCenter',
    components:{ VMapShow },
    data(){
      return {
         amap_center:[],
         amap_markers:[],
         showMap:false,
         show_tools:true
      }
    },
    created(){
       let send_data={
          api_token:this.$store.getters.getSessionId,
          fields:'x_coordinate,y_coordinate'
       };
       this.$store.dispatch('loadOrganInfo',send_data);
    },
    computed:{
       organinfo(){
          return this.$store.getters.getOrganInfo;
       },
       coordinatelist(){
          return this.$store.getters.getCoordinateList;
       }
    },
    methods:{
      getMarkers(type){
        //根据type获取坐标
        let send_data={
           api_token: this.$store.getters.getSessionId,
           type:type
        };
        this.$store.dispatch('loadCoordinateList',send_data);
      },
      change_map_center(lng,lat){
        this.amap_center=[lng,lat];
      },
      //change type
      show_marker(type){
         this.getMarkers(type);
      },
      //change marker
      change_marker(lng,lat){
        this.amap_markers.push([lng,lat]);
      }
    },
    watch:{
       coordinatelist(val){
          //清空现有的markers
          this.amap_markers=[];
          let that=this;
          let markers = [];
          if(val.length>0 && this.type_name!=''){
            for(let i=0;i<val.length;i++){
              markers.push({
                  position:[val[i]['x_coordinate'],val[i]['y_coordinate']],
                  content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 50px; width: 50px; border: 1px solid hsl(180, 100%, 40%); border-radius: 50px; box-shadow: hsl(180, 100%, 50%) 0px 0px 2px;display:table;"><span style="font-size:1px;display:table-cell;vertical-align:middle;">'+val[i]['name']+'</span></div>',
              });
            }
            that.amap_markers=markers;
          }
       },
       organinfo(val){
          if(val.x_coordinate!='' && val.y_coordinate!=''){
             this.amap_center=[val.x_coordinate,val.y_coordinate];
             //首先访问社区
             this.getMarkers('community');
          }
          this.showMap=true;
       }
    }
  }
</script>

<style>
</style>
